<template>
  <div class="user-info flex-center">
    <a-card :bordered="false" class="user-info-content">
      <div class="info-content">
        <div class="info" v-if="activeKey=='1'">
          <div class="title">
            <span>个人档案</span>
          </div>
          <c-form-model
            :datas="formInfoData"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            v-model="infoForm"
          >
          </c-form-model>
        </div>
        <div class="password"  v-if="activeKey=='2'">
          <div class="title">
            <span>修改密码</span>
          </div>
          <c-form-model
            :datas="formPasswordData"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            v-model="passwordForm"
            :rules="rules"
            ref="formModels"
          ></c-form-model>
          <p class="footer-btn">
            <a-button @click="resetPassword" type="primary">提交</a-button>
          </p>
        </div>
      </div>
    </a-card>
  </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  name: "UserInfo",
  components: {},

  data() {
    return {
      infoForm: {
        name: "张三",
        account: "zhangsan@zk.com",
        department: "zhangsan@zk.com",
        position: "zhangsan@zk.com",
        updateTime: "zhangsan@zk.com",
        creatTime: "zhangsan@zk.com"
      },
      passwordForm: {
        name: "张三",
        account: "zhangsan@zk.com",
        password: "",
        confirmPassword: ""
      },
      formPasswordData: [
        {
          label: "姓名",
          prop: "name",
          disabled: true
        },
        {
          label: "登录账号",
          prop: "account",
          disabled: true
        },
        {
          label: "登录密码",
          prop: "password"
        },
        {
          label: "确认密码",
          prop: "confirmPassword"
        }
      ],
      formInfoData: [
        {
          label: "姓名",
          prop: "name",
          disabled: true
        },
        {
          label: "登录账号",
          prop: "account",
          disabled: true
        },
        {
          label: "所属部门",
          prop: "department",
          disabled: true
        },
        {
          label: "职位名称",
          prop: "position",
          disabled: true
        },
        {
          label: "最近登录",
          prop: "updateTime",
          disabled: true
        },
        {
          label: "创建时间",
          prop: "creatTime",
          disabled: true
        }
      ],
      activeKey: "1",
      labelCol: { span: 5 },
      wrapperCol: { span: 16 },
      rules: {
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        confirmPassword: [
          { required: true, message: "请确认密码", trigger: "blur" }
        ]
      }
    };
  },
  computed: {
    ...mapState({})
  },
  created() {},
  watch: {
    $route() {
      this.activeKey = this.$route.query.key;
    }
  },
  methods: {
    resetPassword() {
      this.$refs.formModels.handleValidate().then(data => {
        //  this.$message.success("操作成功");
      });
    }
  }
};
</script>

<style lang="less" scoped>
.user-info {
  .info-content {
    width: 700px;
    height: 500px;
  }
  .user-info-content{
    margin: 30px 0 100px 0;
  }
  ::v-deep .ant-tabs-nav-scroll {
    text-align: center;
  }
  .title {
    height: auto;
    width: auto;
    border-bottom: 1px solid #ebebeb;
    padding-bottom: 10px;
    width: 100%;
    margin: 10px auto;
    text-align: center;
    font-size:  15px;
    font-weight: 600;
  }
  .footer-btn {
    width: 100%;
    position: relative;
    text-align: center;
  }
}
</style>
